<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>icon font test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="icons.css">
    <style>
        .icon_lists li{
          float:left;
          width: 120px;
          height:170px;
          text-align: center;
          list-style: none;
        }

        [class*="<%= cssName %>"] {
          font-family: "<%= fontName %>";
          font-size: inherit;
          font-style: normal;
          font-size: 42px;
          margin: 10px 0;
          color:#333;
          -webkit-transition: font-size 0.25s ease-out 0s;
          -moz-transition: font-size 0.25s ease-out 0s;
          transition: font-size 0.25s ease-out 0s;
        }
        [class*="<%= cssName %>"]:hover{
          font-size: 50px;
        }

        .name {
          font-size: 20px;
        }

        .clear:after {
          content: '\20';
          display: block;
          height: 0;
          clear: both;
        }
    </style>
</head>

<body>
    <h2>Icon Font</h2>
    <ul class="icon_lists clear">
    <% _.each(icons, function(icon) { %>
       <li class="<%= cssName %>-<%= icon %>">
          <div class="name"><%= icon%></div>
       </li>
    <% }); %>
    </ul>
   <div>
     <h2>Use Icon Font</h2>
     <pre>
      <span class="icon icon-add"></span>
     </pre> 
   </div>    
</body>
</html>